<template>
  <div class="app">
    <f-header :class="{ navBarWrap: navBarFixed }" v-if="!isArticle"></f-header>
    <!-- <header_card></header_card> -->
    <el-row
      type="flex"
      justify="center"
      id="content"
      style="background: rgb(238, 242, 246)"
      :style="{ padding: padding }"
    >
      <el-col :span="6"  class="hidden-md-and-down" v-if="showleft">
        <left></left>
      </el-col>
      <el-col
        :xs="{ span: 24, offset: 0 }"
        :lg="span"
        :offset="offset"
        :style="{ minHeight: minHeight + 'px' }"
        style="background: rgb(238, 242, 246); border-radius: 5px"
      >
        <router-view></router-view>
      </el-col>
    </el-row>
    <!-- <el-row type="flex" class="card"></el-row> -->
    <f-footer></f-footer>
  </div>
</template>

<script>
import left from "./components/left-nav";
export default {
  name: "app",
  data() {
    return {
      minHeight: 0,
      navBarFixed: true,
      card_height: 700,
      display: "block",
      showleft: true,
      span: 14,
      offset: 1,
      isArticle: false,
      padding: "80px 0",
    };
  },
  components: {
    left,
  },
  methods: {
    watchScroll() {
      var scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;
      //  当滚动超过 50 时，实现吸顶效果
      if (scrollTop > this.minHeight / 2) {
        // this.navBarFixed = true;
        // this.display = 'none';
        window.console.log(scrollTop);
      } else if (scrollTop < 10) {
        // this.navBarFixed = true;
        // this.display = 'block';
        window.console.log(scrollTop);
      }
    },
    routeHandler(to, from) {
      this.isArticle = false;
      this.showleft = true;
      this.span = 14;
      this.offset = 1;
      this.padding = "80px 0";
      if (
        to.path.match("/admin/*") ||
        to.path.match("/article/*") ||
        to.path.match("/user/*")
      ) {
        this.showleft = false;
        this.span = 24;
        this.offset = 0;
        this.isArticle = true;
        this.padding = "0";
      }
    },
  },
  mounted() {
    let that = this;
    that.minHeight = document.documentElement.clientHeight;
    that.card_height = document.documentElement.clientHeight;
    window.onresize = function () {
      that.minHeight = document.documentElement.clientHeight;
      that.card_height = document.documentElement.clientHeight;
    };
    // window.addEventListener("scroll", this.watchScroll, true);
    this.routeHandler({ path: this.$route.fullPath });
  },
  watch: {
    $route(to, from) {
      this.routeHandler(to, from);
    },
  },
};
</script>

<style>
.app,
button,
body {
  font-family: "microsoft yahei" !important;
}

.navBarWrap {
  position: fixed;
  top: 0;
  z-index: 999;
  width: 100%;
}
</style>